<template>
  <div id="app">
    <el-card shadow="always">
      <el-form :inline="true" :model="tbSpecificationSearch" class="demo-form-inline" >
        <el-form-item >
          <el-button @click="editStudent">新增</el-button>
          <el-button>删除</el-button>
          <el-button>刷新</el-button>
        </el-form-item>
        <el-form-item >
          <el-input v-model="tbSpecificationSearch.specName" placeholder="规格名称"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button @click="search">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
          ref="multipleTable"
          :data="tbSpecificationList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="155"
            stripe>
        </el-table-column>
        <el-table-column
            prop="id"
            label="规格ID"
            width="380">
        </el-table-column>
        <el-table-column
            prop="specName"
            label="规格名称"
            width="380">
        </el-table-column>
        <el-table-column
            label="操作"
            width="180">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form :model="tbSpecification">
        <el-form-item label="规格名称" :label-width="formLabelWidth">
          <el-input v-model="tbSpecification.specName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSpecification">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import tbSpecificationApi from "@/api/TbSpecification";
import tbSpecification from "@/api/TbSpecification";

export default {
  computed: {
    tbSpecification() {
      return tbSpecification
    }
  },
  data(){
    return{
      tbSpecificationList:[],
      page:1,
      pageSize:5,
      total:100,
      tbSpecificationSearch:{},
      dialogFormVisible:false,
      formLabelWidth:'100px',
      title:'添加规格',
      tbSpecification:{},
    }
  },
  created() {
     this.findByPage(this.page,this.pageSize)
    this.search()
  },
  methods:{
    async findByPage(page,pageSize){
      const {data:res} = await tbSpecificationApi.findByPage(this.page,this.pageSize)
      this.tbSpecificationList = res.rows
      this.total = res.total
    },
    async search(){
      const {data} = await tbSpecificationApi.search(this.page,this.pageSize,this.tbSpecificationSearch)
      this.tbSpecificationList = data.rows
      this.total = data.total
    },
    editStudent(){
      this.dialogFormVisible = true
    },
    async saveSpecification(){ //保存学生
      const {data:res} = await tbSpecificationApi.save(this.tbSpecification)
      if (res.code === 200){
        this.$message({
          type: 'success',
          message: res.message
        })
        // 关闭对话框
        this.dialogFormVisible = false
        // 重新刷新页面
        this.search()
      }else {
        this.$message({
          type: 'error',
          message: res.message
        })
      }
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      // this.findByPage(this.page,this.pageSize)
      this.search()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      // this.findByPage(this.page,this.pageSize)
      this.search()
    }
  }
}
</script>
<style>
      .el-card{
        width: 90%;
      margin: 0 auto;
      }
      #app{
        display: flex;
        justify-content: center;
      }
      .el-pagination{
        text-align: right;
        margin-top: 15px;
      }
</style>
